:root {
  --x-primary-color: rgb(0, 207, 151);
  --x-primary-color-lighter: #edfcf8;
  --x-primary-color-from: rgb(20, 215, 138);
  --x-primary-color-to: rgb(0, 207, 151);
  --x-danger-color: rgb(255, 89, 73);
  --x-danger-color-from: rgb(255, 89, 73);
  --x-danger-color-to: rgb(255, 77, 77);
  --x-default-button-bg-color: #f2f2f2;
  --x-default-button-border-color: rgb(211, 211, 216);
  --x-calendar-day-bg-color: #f2f2f2;
  --x-panel-bg-color: #fff;
  --x-switch-bg-color: rgb(211, 211, 216);
  --x-radio-bg-color: rgb(230, 230, 235);
  --x-border-color: #f2f2f2;
  --x-radio-border-color: rgba(0, 0, 0, 0.15);
  --x-input-border-color: #ebebee;
  --x-input-border-focus-color: rgb(196, 196, 205);
  --x-bg-color-lighter: #fff;
  --x-bg-color: #f2f2f2;
  --x-mask-color: rgba(0, 0, 0, 0.7);
  --x-loading-mask-color: rgba(255, 255, 255, 0.5);
  --x-cell-bg-color: #fff;
  --x-text-color: rgb(60, 60, 90);
  --x-text-color-o90: rgba(60, 60, 90, 0.9);
  --x-text-color-o80: rgba(60, 60, 90, 0.8);
  --x-text-color-o70: rgba(60, 60, 90, 0.7);
  --x-text-color-o60: rgba(60, 60, 90, 0.6);
  --x-text-color-o50: rgba(60, 60, 90, 0.5);
  --x-text-color-o40: rgba(60, 60, 90, 0.4);
  --x-text-color-o30: rgba(60, 60, 90, 0.3);
  --x-time-picker-mask-color-from: #fff;
  --x-time-picker-mask-color-to: rgba(255, 255, 255, 0.8);
  --x-time-picker-border-color: #f2f2f2;
}

@media (prefers-color-scheme: dark) {
  .x-app--support-dark-mode {
    --x-primary-color: rgb(0, 207, 151);
    --x-primary-color-lighter: #edfcf8;
    --x-primary-color-from: rgb(20, 215, 138);
    --x-primary-color-to: rgb(0, 207, 151);
    --x-danger-color: rgb(255, 89, 73);
    --x-danger-color-from: rgb(255, 89, 73);
    --x-danger-color-to: rgb(255, 77, 77);
    --x-default-button-bg-color: rgba(255, 255, 255, 0.05);
    --x-default-button-border-color: rgba(255, 255, 255, 0.1);
    --x-calendar-day-bg-color: rgba(255, 255, 255, 0.05);
    --x-panel-bg-color: rgb(47, 47, 51);
    --x-switch-bg-color: rgba(255, 255, 255, 0.1);
    --x-border-color: #1e1f23;
    --x-radio-bg-color: rgba(255, 255, 255, 0.1);
    --x-radio-border-color: rgba(255, 255, 255, 0.2);
    --x-input-border-color: rgba(255, 255, 255, 0.2);
    --x-input-border-focus-color: rgb(0, 207, 151);
    --x-bg-color-lighter: #1f1f23;
    --x-bg-color: #18181c;
    --x-mask-color: rgba(0, 0, 0, 0.7);
    --x-loading-mask-color: rgba(0, 0, 0, 0.5);
    --x-cell-bg-color: #28282d;
    --x-text-color: rgb(211, 211, 211);
    --x-text-color-o90: rgba(211, 211, 211, 0.9);
    --x-text-color-o80: rgba(211, 211, 211, 0.8);
    --x-text-color-o70: rgba(211, 211, 211, 0.7);
    --x-text-color-o60: rgba(211, 211, 211, 0.6);
    --x-text-color-o50: rgba(211, 211, 211, 0.5);
    --x-text-color-o40: rgba(211, 211, 211, 0.4);
    --x-text-color-o30: rgba(211, 211, 211, 0.3);
    --x-time-picker-mask-color-from: rgba(47, 47, 51, 1);
    --x-time-picker-mask-color-to: rgba(47, 47, 51, 0.8);
    --x-time-picker-border-color: #18181c;
  }
}

$smallRadius: 6 !default; // input、button的圆角
$bigRadius: 20 !default; // alert、dialog的圆角

@function px($px) {
  @return $px * 1px;
}
